<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Internet pizzeria - Delivery</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGaVKsN7Fq_fEe0RJPADRCBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_HUEVtZQfC_2K48p4H3BMNKsMCQ"
      type="text/javascript"></script>
    <script type="text/javascript">

	var map = null;
    var directions;

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        
		map.addControl(new GSmallMapControl());
		
		var waypoints = new Array();
		var i = 0;
		<c:forEach var="waypoint" items="${waypoints}">	
			waypoints[i] = "${waypoint}";
			i++;
		</c:forEach>

		
		directions = new GDirections(map, null);
		GEvent.addListener(directions,"error", function() { alert("Directions failed: code "+directions.getStatus().code); });
		GEvent.addListener(directions,"addoverlay", onGDirectionsAddoverlay);
		directions.loadFromWaypoints(waypoints);
			
      }
    }
    
    function onGDirectionsAddoverlay(){    
    	//directions.getMarker(0).setImage('resources/pizzeria.jpg');
    	GEvent.clearListeners(directions.getMarker(0), "click");
    	var i=1;
    	var price;
    	var orderDetailHtml;
    	<c:forEach var="orderInfo" items="${orderInfos}">		
			var marker = directions.getMarker(i);
			GEvent.clearListeners(marker, "click");
			var labels = ["Address","Order","Status"];
			var htmls = [];
			htmls.push("Street: ${orderInfo.order.delivery.streetAndNumber}<br/>Zip code: ${orderInfo.order.delivery.zipCode}<br/>City: ${orderInfo.order.delivery.city}<br/>Customer: ${orderInfo.order.customer.name} ${orderInfo.order.customer.surname}<br/>Telephone: ${orderInfo.order.customer.telephone}");
			
			orderDetailHtml = "Order number: ${orderInfo.order.id}<hr/>";
			price = 0.0;			
			<c:forEach var="orderPizza" items="${orderInfo.pizzas}">
			orderDetailHtml += "${orderPizza.quantity} x ${orderPizza.product.name} <br/>";
			price += ${orderPizza.quantity} * ${orderPizza.product.price};
			</c:forEach>
			<c:forEach var="orderDrink" items="${orderInfo.drinks}">
			orderDetailHtml += "${orderDrink.quantity} x ${orderDrink.product.name} <br/>";
			price += ${orderDrink.quantity} * ${orderDrink.product.price};
			</c:forEach>
			orderDetailHtml += "<hr/>Price: "+price.toFixed(2)+"<br/>";
			var deliveryCharge = ${orderInfo.order.delivery.charge};
			orderDetailHtml += "Delivery: "+deliveryCharge.toFixed(2)+"<br/>";
			orderDetailHtml += "Total: "+(price+deliveryCharge).toFixed(2);
			htmls.push(orderDetailHtml);
			
			var	statusSectionHtml = "<form method=\"post\" name=\"changeStatusForm\" action=\"deliveryMap\"><div id=\"formSection\">Delivery comment:<br/><textarea rows=\"5\" cols=\"20\" id=\"deliveryComment\" name=\"deliveryComment\"></textarea><br/><input type=\"hidden\" name=\"orderId\" id=\"orderId\" value=\"${orderInfo.order.id}\"/><input type=\"submit\" value=\"Delivered\" name=\"status\" /><input type=\"submit\" value=\"Not delivered\" name=\"status\"/></div></form>";
		
			htmls.push(statusSectionHtml);
			addMarkerListener(marker, htmls, labels);	
			i++;								
		</c:forEach>
    	directions.getMarker(directions.getNumGeocodes() - 1).setImage('resources/pizzeria.jpg');
    	GEvent.clearListeners(directions.getMarker(directions.getNumGeocodes() - 1), "click");
    }
    
   
    
    function addMarkerListener(marker, htmls, labels){    
	    GEvent.addListener(marker, "click", function(){
	    	if (htmls.length > 2) {
            htmls[0] = '<div style="width:'+htmls.length*88+'px;heigth:200px">' + htmls[0] + '<\/div>';
        }
	    var tabs = [];
	    for (var i=0; i<htmls.length; i++) {
            tabs.push(new GInfoWindowTab(labels[i],htmls[i]));
        }										
		marker.openInfoWindowTabsHtml(tabs); });		
			    
    }
        
   
  
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <%@ include file="navigationMenu.jsp" %>
  <h2>Delivery map</h2>
    <div id="map" style="width: 75%; height: 600px; background-color: white; background-image: url('resources/ajax-loader.gif'); background-position: center; background-repeat: no-repeat;"></div>
  </body>
</html>